// import $ from 'jquery';
//import html2canvas from './html2canvas.min';

var downImg = function(ele, cname) {
    // $('.downloads').hide();
    var bgColor = '#454d56';
    var downloadName = '123';
    // var cname = this.cname;

    setTimeout(function() {
            var $chartElem = document.getElementById(ele);
            var width = $chartElem.offsetWidth //outerWidth();
            var height = $chartElem.offsetHeight //outerHeight();
            var title;
            var userAgent = navigator.userAgent;
            var isSafari = userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Chrome") < 1;
            if (!!window.ActiveXObject || "ActiveXObject" in window || isSafari) {
                title = "右键 => 图片另存为";
            } else {
                title = '点击保存';
            }

            html2canvas($chartElem, {
                onrendered: function(canvas) {
                    var imgData = canvas.toDataURL();
                    setTimeout(function() {
                        var imgData = canvas.toDataURL();
                        var ahtml = '<a class="build_img" style="background:' + (bgColor || 'url(/app/images/bg.png)') + ';margin-left:-' + width / 2 + 'px;margin-top:-' + height / 2 + 'px;display:inline-block;" href="' + imgData + '" download="' + cname + '.png">\
                                <img style="vertical-align: middle;" src="' + imgData + '" title="' + title + '">\
                            </a>';
                        var $downloadTempl = document.createElement('div');
                        $downloadTempl.className = 'bi_bg';
                        $downloadTempl.id = 'bi_bg';
                        $downloadTempl.innerHTML = ahtml;
                        // var $downloadTempl = $('<div class="bi_bg" id="bi_bg"><a class="build_img" style="background:'+ (bgColor || 'url(/app/images/bg.png)') +';margin-left:-'+ width/2 +'px;margin-top:-'+ height/2 +'px;display:inline-block;" href="' + imgData + '" download="'+cname+'.png">\
                        //             <img style="vertical-align: middle;" src="' + imgData + '" title="'+title+'">\
                        //         </a></div>');
                        // $("body").append($downloadTempl);
                        document.body.appendChild($downloadTempl);

                        document.getElementById('bi_bg').addEventListener('click', function() {
                            document.body.removeChild(document.body.lastChild)
                                // $('.downloads').show();
                        })
                    }, 200)
                }
            });
        }, 100)
        // var $chartElem = $(ele);
        // var width = $chartElem.outerWidth();
        // var height = $chartElem.outerHeight();
        // var title;
        // var userAgent = navigator.userAgent;
        // var isSafari = userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Chrome") < 1 ;
        // if (!!window.ActiveXObject || "ActiveXObject" in window || isSafari){
        //     title = "右键 => 图片另存为";
        // }else{
        //     title = '点击保存';
        // }
        // var isChrome = window.google && window.chrome;

    // html2canvas($chartElem, {
    //     onrendered: function(canvas){
    //         document.body.appendChild(canvas);

    //         var url = canvas.toDataURL();
    //           以下代码为下载此图片功能
    //          var triggerDownload = $("<a>").attr("href", url).attr("download", getNowFormatDate()+"异常信息.png").appendTo("body");
    //            triggerDownload[0].click();
    //            triggerDownload.remove();

    //         setTimeout(function(){
    //             var imgData = canvas.toDataURL();
    //             console.log(imgData)
    //             var downloadTempl = '<a class="build-chart" style="background:'+ ($scope.option.bgColor || 'url(/app/images/bg.png)') +';width:'+ width +';height:'+ height +';display:inline-block;position:relative" href="' + imgData + '" download="chart.png"><span class="down_tit">'+$scope.option.downloadName+'</span>\
    //                         <img style="vertical-align: middle;" src="' + imgData + '" title="'+title+'">\
    //                     </a>';
    //             // var $downloadContent = $(downloadTempl);
    //             $('body').append($(downloadTempl))
    //             // var d = G.dialog({
    //             //     id: 'chart-download-dialog',
    //             //     quickClose: true,
    //             //     width: isChrome ? width + 10 : width,
    //             //     height: height,
    //             //     content: downloadTempl
    //             // });

    //             // $(dialog.get('chart-download-dialog').node).on('click', function(){
    //             //     if(isChrome){
    //             //         G.dialog.alert("已添加到下载列表");
    //             //     }
    //             //     d.close().remove();
    //             // });

    //             //chrome浏览器 生成的图片总是宽10px;
    //             // $(dialog.get('chart-download-dialog').node).find('.ui-dialog-content').css({overflow: 'hidden'});

    //             // setTimeout(function(){

    //             //     var $downloadContent = $(dialog.get('chart-download-dialog').node).find('.build-chart');
    //             //     html2canvas($downloadContent, {
    //             //         onrendered: function(canvas){

    //             //             var imgData = canvas.toDataURL();
    //             //             // console.log(imgData);
    //             //             var downloadFileName = $scope.option.downloadName;
    //             //             if($scope.startTime && $scope.endTime){
    //             //                 downloadFileName +=  + transDate($scope.startTime) + '-' + transDate($scope.endTime);
    //             //             }else{
    //             //                 downloadFileName += G.utils.date.getDate();
    //             //             }
    //             //             var downloadTempl = '<a style="display:inline-block;" href="' + imgData + '" download="'+ downloadFileName +'">\
    //             //                         <img src="' + imgData + '" title="'+title+'">\
    //             //                     </a>';
    //             //             d.content(downloadTempl);

    //             //         },

    //             //     });
    //             // }, 200);
    //         }, 50);

    //     }

    // });  
}


export default downImg;